<template>
	<view>
		<div class="tab-nav uni-flex">
			<div class="tab-item" @click="noticeTypeChange(1)" :class="searchData.type==1?'active-item':''">重要通知</div>
			<div class="tab-item" @click="noticeTypeChange(3)" :class="searchData.type==3?'active-item':''">移动</div>
			<div class="tab-item" @click="noticeTypeChange(4)" :class="searchData.type==4?'active-item':''">联通</div>
			<div class="tab-item" @click="noticeTypeChange(2)" :class="searchData.type==2?'active-item':''">电信</div>
		</div>
		<div class="notice-list">
			<view class="notice-block" :key="item.businessnotice_id" @click="seeNoticeDetail(index)" v-for="(item,index) in list">
				<view class="notice-top uni-flex">
					<view class="notice-top-left uni-flex">
						<text class="notice-title">{{item.title}}</text>
					</view>
					<view class="notice-top-right no-shrink uni-flex uni-column align-items-bottom">
						<view class="notice-time right" :class="item.isread==2?'new-notice':''">{{item.send_time}}</view>
						<view v-if="item.product_type_id==20" style="background-color: #F39800;" class="product-tag right">视频彩铃</view>
						<view v-if="item.product_type_id==1" style="background-color: #5374F7;" class="product-tag right">企业彩铃</view>
					</view>
				</view>
				<view>
					<template v-if="item.type==1">
						<view v-if="item.merchant" class="notice-cell uni-flex">
							<view class="notice-cell-title">运营商：</view>
							<view class="notice-cell-content">{{item.merchant==1?'电信':item.merchant==2?'移动':'联通'}}</view>
						</view>
						<view v-if="item.noticecategory" class="notice-cell uni-flex">
							<view class="notice-cell-title">通知类别：</view>
							<view class="notice-cell-content">{{item.noticecategory==0?'操作功能':item.noticecategory==1?'营销数据':'其他'}}</view>
						</view>
						<view v-if="item.province" class="notice-cell uni-flex">
							<view class="notice-cell-title">省份：</view>
							<view class="notice-cell-content">{{item.province}}</view>
						</view>
					</template>
					<template v-else>
						<template v-if="item.conditionopt==0">
							<view v-if="item.stopprovince" class="notice-cell uni-flex">
								<view class="notice-cell-title">暂停省份：</view>
								<view class="notice-cell-content">{{item.stopprovince}}</view>
							</view>
							<view v-if="item.recoverprovince" class="notice-cell uni-flex">
								<view class="notice-cell-title">恢复省份：</view>
								<view class="notice-cell-content">{{item.recoverprovince}}</view>
							</view>
						</template>
						<template v-if="item.conditionopt==1">
							<view v-if="item.msg" class="notice-cell uni-flex">
								<view class="notice-cell-title">短信：</view>
								<view class="notice-cell-content">{{item.msg}}</view>
							</view>
							<view v-if="item.newphone" class="notice-cell uni-flex">
								<view class="notice-cell-title">电话：</view>
								<view class="notice-cell-content">{{item.newphone}}</view>
							</view>
						</template>
						<template v-if="item.conditionopt==2">
							<view v-if="item.openfeeprovince" class="notice-cell uni-flex">
								<view class="notice-cell-title">开通省份：</view>
								<view class="notice-cell-content">{{item.openfeeprovince}}</view>
							</view>
							<view v-if="item.functionfee" class="notice-cell uni-flex">
								<view class="notice-cell-title">功能费：</view>
								<view class="notice-cell-content">{{item.functionfee}}</view>
							</view>
							<view v-if="item.monthfee" class="notice-cell uni-flex">
								<view class="notice-cell-title">包月费：</view>
								<view class="notice-cell-content">{{item.monthfee}}</view>
							</view>
						</template>
					</template>
					<view class="notice-cell uni-flex">
						<text class="notice-cell-title">公告内容：</text>
						<view class="notice-cell-content notice-body text-overflow-hidden notice-body-overflow" v-html="item.content"></view>
					</view>
				</view>
			</view>
		</div>
		<div class="see-more uni-inline-item justify-center" @click="loadMore" v-if="searchData.pagenow<totalPage">查看更多<view class="more-arrow uni-inline-item">》</view></div>
		<view class="no-more" v-if="searchData.pagenow==totalPage">没有更多了…</view>
		
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog  mode="input" title="业务公告" cancelText="关闭" confirmText="更多公告" @close="closePopup"  @confirm="goNoticeList">
				<view class="popup-notice notice-block">
					<view class="notice-top uni-flex">
						<view class="notice-top-left uni-flex">
							<text class="notice-title">{{notice.title}}</text>
						</view>
						<view class="notice-top-right no-shrink uni-flex uni-column align-items-bottom">
							<view class="notice-time right">{{notice.send_time}}</view>
							<view v-if="notice.product_type_id==20" style="background-color: #F39800;" class="product-tag right">视频彩铃</view>
							<view v-if="notice.product_type_id==1" style="background-color: #5374F7;" class="product-tag right">企业彩铃</view>
						</view>
					</view>
					<view>
						<template v-if="notice.type==1">
							<view v-if="notice.merchant" class="notice-cell uni-flex">
								<view class="notice-cell-title">运营商：</view>
								<view class="notice-cell-content">{{notice.merchant==1?'电信':notice.merchant==2?'移动':'联通'}}</view>
							</view>
							<view v-if="notice.noticecategory" class="notice-cell uni-flex">
								<view class="notice-cell-title">通知类别：</view>
								<view class="notice-cell-content">{{notice.noticecategory==0?'操作功能':notice.noticecategory==1?'营销数据':'其他'}}</view>
							</view>
							<view v-if="notice.province" class="notice-cell uni-flex">
								<view class="notice-cell-title">省份：</view>
								<view class="notice-cell-content">{{notice.province}}</view>
							</view>
						</template>
						<template v-else>
							<template v-if="notice.conditionopt==0">
								<view v-if="notice.stopprovince" class="notice-cell uni-flex">
									<view class="notice-cell-title">暂停省份：</view>
									<view class="notice-cell-content">{{notice.stopprovince}}</view>
								</view>
								<view v-if="notice.recoverprovince" class="notice-cell uni-flex">
									<view class="notice-cell-title">恢复省份：</view>
									<view class="notice-cell-content">{{notice.recoverprovince}}</view>
								</view>
							</template>
							<template v-if="notice.conditionopt==1">
								<view v-if="notice.msg" class="notice-cell uni-flex">
									<view class="notice-cell-title">短信：</view>
									<view class="notice-cell-content">{{notice.msg}}</view>
								</view>
								<view v-if="notice.newphone" class="notice-cell uni-flex">
									<view class="notice-cell-title">电话：</view>
									<view class="notice-cell-content">{{notice.newphone}}</view>
								</view>
							</template>
							<template v-if="notice.conditionopt==2">
								<view v-if="notice.openfeeprovince" class="notice-cell uni-flex">
									<view class="notice-cell-title">开通省份：</view>
									<view class="notice-cell-content">{{notice.openfeeprovince}}</view>
								</view>
								<view v-if="notice.functionfee" class="notice-cell uni-flex">
									<view class="notice-cell-title">功能费：</view>
									<view class="notice-cell-content">{{notice.functionfee}}</view>
								</view>
								<view v-if="notice.monthfee" class="notice-cell uni-flex">
									<view class="notice-cell-title">包月费：</view>
									<view class="notice-cell-content">{{notice.monthfee}}</view>
								</view>
							</template>
						</template>
						<view class="notice-cell uni-flex">
							<text class="notice-cell-title">公告内容：</text>
							<view class="notice-cell-content notice-body" v-html="notice.content"></view>
						</view>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {formatRichText} from '../../common/util.js'
	export default {
		data() {
			return {
				totalPage:0,
				loading:false,
				searchData:{
					type:1,
					app:2,
					pagenow:1,
					shownum:5,
					noticetype:2,
					name:''
				},
				list:[],
				notice:{},
			}
		},
		mounted(){
			this.queryNoticeList()
		},
		methods: {
			seeNoticeDetail(index){
				this.notice=this.list[index]
				this.$refs.popup.open()
				this.addNoticeReadRecord()
			},
			closePopup(){
				this.notice.isread=1
			},
			addNoticeReadRecord(){
				this.$request.addNoticeReadRecord({
					businessnotice_id:this.notice.businessnotice_id
				})
			},
			noticeTypeChange(index){
				if(this.searchData.type!=index){
					this.searchData.type=index
					this.search()
				}
			},
			search(){
				this.searchData.pagenow=1
				this.totalPage=0
				this.queryNoticeList()
				this.list=[]
			},
			loadMore(){
				this.searchData.pagenow++
				this.queryNoticeList()
			},
			queryNoticeList(){
				console.log(this.searchData)
				this.loading=true
				this.$request.queryNoticeList(this.searchData)
				.then(res=>{
					if(res.code==0){
						var list=res.noticeList
						list.forEach(item=>{
							item.content=formatRichText(item.content)
						})
						this.list=this.list.concat(list)
						this.totalPage=res.page.totalpage
					}else{
						
					}
					this.loading=false
				})
			}
		}
	}
</script>

<style lang="scss">
	.tab-nav{
		height: 90rpx;
		padding: 0 30rpx;
		z-index: 8;
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		background-color: #fff;
		box-shadow: 0 0 20rpx rgba(0,0,0,.3);
		.tab-item{
			flex-grow:1;
			height: 100%;
			line-height: 90rpx;
			text-align: center;
			color: #666;
			font-size: 30rpx;
			position: relative;
			&:nth-child(1){
				width: 31%;
			}
			&:nth-child(n+2){
				width: 23%;
			}
		}
		.active-item{
			color: #333;
			&:after{
				content: '';
				width: 80rpx;
				height: 6rpx;
				background: rgb(83, 116, 247);
				position: absolute;
				left: 0;
				right: 0;
				bottom: 11rpx;
				margin: 0 auto;
			}
		}
	}
	.notice-list{
		padding-top: 120rpx;
	}
	.notice-block {
		background: #fff;
		padding: 23rpx 34rpx 12rpx 26rpx;
		width: 670rpx;
		border-radius: 10rpx;
		margin: 0 auto 20rpx;
		&:last-of-type{
			margin-bottom: 0;
		}
		.notice-top {
			margin-bottom: 12rpx;
			.notice-top-left {
				flex: 1;
				width: 50%;
				margin-right: 50rpx;
				.notice-title {
					line-height: 40rpx;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.notice-top-right {
				height: 40rpx;
				.notice-time {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 20rpx;
					color: #666666;
					position: relative;
				}

				.new-notice {
					&:after {
						content: '';
						display: block;
						width: 10rpx;
						height: 10rpx;
						background: rgb(213, 33, 0);
						border-radius: 10rpx;
						position: absolute;
						right: -20rpx;
						top: 0;
						bottom: 0;
						margin: auto;
					}
				}

				.product-tag {
					width: 92rpx;
					height: 26rpx;
					background: rgb(243, 152, 0);
					border-radius: 4rpx;
					text-align: center;
					line-height: 26rpx;
					color: #fff;
					font-size: 20rpx;
					margin-top: 6rpx;
				}
			}
		}

		.notice-cell {
			margin-bottom: 12rpx;
			line-height: 36rpx;
			font-size: 24rpx;

			.notice-cell-title {
				width: 120rpx;
				height: 36rpx;
				margin-right: 10rpx;
				color: #333;
				flex-shrink: 0;
				text-align: right;
			}

			.notice-cell-content {
				width: 492rpx;
				color: #666;
			}
			.notice-body{
				max-height: 400rpx;
				overflow: auto;
			}
			.notice-body-overflow {
				height: 36rpx;
			}
		}

		.yys-tag {
			height: 26rpx;
			border-radius: 4rpx;
			text-align: center;
			line-height: 26rpx;
			color: #fff;
			font-size: 18rpx;
		}

		.yys-tag1 {
			width: 90rpx;
		}

		.yys-tag2 {
			width: 50rpx;
		}
	}
	.popup-notice{
		width: 100%;
		padding: 0;
	}
	.see-more{
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		color: #5374F7;
		font-size: 24rpx;
		.more-arrow{
			transform: rotate(90deg);
			margin-left: 20rpx;
			transform-origin: center center;
			margin-top: 6rpx;
		}
	}
	.no-more{
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		color: #999;
		font-size: 22rpx;
	}
</style>
